<template>
  <view class="custom-tab-bar" :style="{ paddingBottom: safeAreaBottom + 'rpx' }">
    <view
      v-for="(tab, index) in tabList"
      :key="tab.path"
      @click="changeTab(tab.path)"
      class="tab-item"
    >
      <view class="menu-btn-box" :class="{ 'active': currentTab === tab.path }">
        <image class="active-menu" v-if="currentTab === tab.path" src="/static/images/active-menu.png"></image>
        <image
          :src="currentTab === tab.path ? tab.selectedIconPath : tab.iconPath"
          class="tab-icon"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      required: true
    },
    currentTab: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      safeAreaBottom: 0, // 用于存储安全区域的底部值
      tabBarHeight: 80 // 设置 TabBar 的高度，可以根据需要调整
    };
  },
  mounted() {
    // 获取安全区域底部的值
    this.getSafeAreaBottom();
  },
  methods: {
    changeTab(path) {
      this.$emit('change', path); // 发出切换事件
    },
    getSafeAreaBottom() {
      const windowInfo = uni.getWindowInfo();
      this.safeAreaBottom = windowInfo.safeAreaInsets?.bottom || 20; // 使用安全区域底部值
    }
  }
};
</script>

<style lang="scss">
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  //background-color: rgba(255, 255, 255, 0.9); // 背景色透明
  //border-top-left-radius: 20rpx; // 圆角
  //border-top-right-radius: 20rpx; // 圆角
  z-index: 1000; // 确保在最上层
  display: flex;
  justify-content: space-between; // 平均分配空间
  align-items: center; // 垂直居中
  //box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); // 阴影效果
  padding: 10rpx 0; // 内边距
  height: 100rpx; // TabBar 高度
}

.tab-item {
  display: flex;
  flex-direction: column; // 垂直排列图标和文字
  align-items: center; // 水平居中
  flex: 1; // 使每个 TabItem 等分
  text-align: center; // 文字居中
  margin-bottom: 20rpx;
}

.tab-icon {
  width: 80rpx; // 图标大小
  height: 40rpx; // 图标大小
  transition: transform 0.2s; // 添加过渡效果
}

.tab-text {
  font-size: 32rpx; // 文字大小
  color: #333; // 文字颜色
  transition: color 0.2s; // 添加过渡效果
  margin-top: 6rpx;
}

.active {
  transform: scale(1.1); // 放大效果
  position: relative;
}

.active-menu{
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  top: -27rpx;
  left: -14rpx;
}



.active-text {
  color: #F30E0E; // 激活状态文字颜色
}
</style>
